<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uupaa-event.js - uuClass.Event.drag</title>
<style type="text/css">@import url(../README.css);</style>
<style type="text/css">
#drag1 {
  background-color: green;
  position: absolute; left: 0; top: 0;
  width: 100px; height: 100px;
}
#drag2 {
  background-color: yellowgreen;
  position: relative; left: 0; top: 0;
  width: 100px; height: 100px;
}
</style>
<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-detect.js/uupaa-detect.mini.js"></script>
<script type="text/javascript" src="../uupaa-event.js"></script>
<script type="text/javascript" src="../uupaa-drag.js"></script>
</head>
<body>
<div id="drag1">draggable1</div>
<div style="position: absolute; left: 100px; top: 100px">
  <div id="drag2">draggable2</div>
</div>
<script>
function boot() {
  var MyDraggable = function(elm) {
    this.elm = elm;
    elm.style.cursor = "move";
    uu.event.attach(this.elm, "mousedown", this);
  };
  MyDraggable.prototype = {
    handleEvent: function(evt) {
      uu.event.stop(evt);
      uu.event.drag(evt, this.elm);
      if (uu.event.kind(evt) <= 2) {
        uu.event.toggle(document.uniqueID ? this.elm : document,
                        "mousemove,mouseup", this, true);
      }
    }
  };
  var drag1 = new MyDraggable(document.getElementById("drag1"));
  var drag2 = new MyDraggable(document.getElementById("drag2").parentNode);
}
window.onload = boot;
</script>
<pre class="eg">
&lt;style type="text/css"&gt;
#drag1 {
  background-color: green;
  position: absolute; left: 0; top: 0;
  width: 100px; height: 100px;
}
#drag2 {
  background-color: yellowgreen;
  position: relative; left: 0; top: 0;
  width: 100px; height: 100px;
}
&lt;/style&gt;
&lt;div id="drag1"&gt;draggable1&lt;/div&gt;
&lt;div style="position: absolute; left: 100px; top: 100px"&gt;
  &lt;div id="drag2"&gt;draggable2&lt;/div&gt;
&lt;/div&gt;
var MyDraggable = function(elm) {
  this.elm = elm;
  elm.style.cursor = "move";
  <b>uu.event.attach</b>(this.elm, "mousedown", this);
};
MyDraggable.prototype = {
  <b>handleEvent</b>: function(evt) {
    uu.event.stop(evt);
    <b>uu.event.drag</b>(evt, this.elm);
    if (uu.event.kind(evt) &lt;= 2) {
      <b>uu.event.toggle</b>(document.uniqueID ? this.elm : document,
                        "mousemove,mouseup", this, true);
    }
  }
};
var drag1 = new MyDraggable(document.getElementById("drag1"));
var drag2 = new MyDraggable(document.getElementById("drag2").parentNode);
</pre>
</body></html>
